<template>
  <div style="width: 100vw; height: 100vh; margin: 0 auto; overflow: hidden">
    <svg-prview
      :component_infos="component_infos"
      :svg_data="prview_data"
      :svgCanvas="{ width: 1920, height: 960 }"
    ></svg-prview>
  </div>
</template>

<script setup lang="ts">
import SvgPrview from "../components/SvgPrview.vue";
import axios from "axios";
import { ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";

const route = useRoute();

const interval = ref<any>(null);

const component_infos = ref([]);
//要预览的数据
const prview_data = ref<any>([]);

//获取组件列表
axios.get("json/InterfaceReturn.json").then((res) => {
  component_infos.value = res.data;
});

axios.get("json/1658132748394.json").then((res) => {
  clearInterval(interval.value);
  prview_data.value = res.data;

  let temp: Array<any> = [...prview_data.value];
  //找到所有的文字
  let TextSvgList = temp.filter((f) => f.active_type == "text");
  let otherSvgList = temp.filter((f) => f.active_type !== "text");

  interval.value = setInterval(() => {
    //生成一个随机数
    let random = Math.round(Math.random() * 10);
    TextSvgList.forEach((textSvg) => {
      if (textSvg.nodeKey == "ND0001") {
        (textSvg as any).extend_attr.text.val = "当前值：" + random;
      }
    });

    otherSvgList.forEach((otherList) => {
      if (otherList.nodeKey == "ND0001") {
        if (
          otherList.active.h_alarm.val.selectval &&
          otherList.active.h_alarm.alarm.val.val <= random
        ) {
          otherList.extend_attr.color.val = otherList.active.h_alarm.alarm.color.val;
          otherList.extend_attr.switch.val.selectval =
            otherList.active.h_alarm.alarm.status.val.selectval;
        }

        if (
          otherList.active.l_alarm.val.selectval &&
          otherList.active.l_alarm.alarm.val.val >= random
        ) {
          otherList.extend_attr.color.val = otherList.active.l_alarm.alarm.color.val;
          otherList.extend_attr.switch.val.selectval =
            otherList.active.l_alarm.alarm.status.val.selectval;
        }
      }
    });
  }, 2000);
});
</script>
